<style lang="scss">
.synthetical {
  .el-header {
    margin-top: 12px;
    // height: 286px !important;
    .el-collapse-item__header {
      background: #e5f1fb;
      border-left: 2px solid #2387e2;
      padding-left: 12px;
    }
    .search-box {
      z-index: 99;
    }
    .conditions-box {
      display: flex;
      zoom: 1;
      .condition-title {
        width: 70px;
        text-align: right;
        flex-shrink: 0;
        margin-right: 8px;
      }
      .condition-tips {
        color: red;
      }
    }
    .two-box {
      margin-top: 7px;
    }
    .search-button {
      margin-top: 7px;
      display: block;
      text-align: left;
      padding-left: 85px;
    }
  }
  .el-main {
    z-index: 0;
    padding: 0 12px;
    .opration-div {
      margin-bottom: 7px;
      float: right;
    }
    .el-table {
      height: calc(100vh - 210px);
    }
    .tabFontSize{
      font-size: 14px;
    }
  }
  // 导出文件下载弹框
  .download-dialog {
    .el-form {
      height: calc(100vh - 320px);
      overflow-y: auto;
      padding-top: 24px;
      .el-upload {
        width: 100%;
        .el-upload-dragger {
          width: 100%;
          height: 160px;
        }
      }
    }
    .gdxx-file {
      a {
        text-decoration: none;
        color: #308ee5;
        padding-right: 36px;
      }
      .file-btn {
        color: #308ee5;
        text-decoration: underline;
        padding: 0 4px;
        cursor: pointer;
      }
      .file-btn:hover {
        color: blue;
      }
    }
  }
}
</style>

<template>
  <el-container class="synthetical">
    <!-- 顶栏容器 -->
    <el-header>
      <el-collapse v-model="activeNames" @change="handleCollapseChange">
        <el-collapse-item name="1">
          <template slot="title">
            <i class="header-icon el-icon-question"></i>综合查询条件
            <i class="header-icon el-icon-question"></i>
          </template>
          <!-- 查询框 -->
          <div class="search-box">
            <div class="conditions-box">
              <div class="condition-title">工单来源：</div>
              <div class="conditions-item">
                <el-radio-group v-model="pageParam.condition.sourceId" size="small">
                  <el-radio-button
                    :label="item.lyid"
                    v-for="(item, index) in sourceList"
                    :key="index"
                  >{{item.lymc}}</el-radio-button>
                </el-radio-group>
              </div>
            </div>
            <div class="conditions-box two-box">
              <div class="condition-title">工单类别：</div>
              <div class="conditions-item">
                <el-radio-group v-model="pageParam.condition.cateId" size="small">
                  <el-radio-button
                    :label="item.catid"
                    v-for="(item, index) in cateList"
                    :key="index"
                  >{{item.name}}</el-radio-button>
                </el-radio-group>
              </div>
            </div>
            <div class="conditions-box two-box">
              <div class="conditions-item">
                工单编号：
                <el-input
                  v-model="pageParam.condition.code"
                  size="small"
                  :clearable="true"
                  placeholder="请输入工单编号"
                  style="width: 180px;"
                ></el-input>
              </div>
              <div class="conditions-item">
                内容类别：
                <el-select
                  v-model="pageParam.condition.conCateId"
                  size="small"
                  :clearable="true"
                  placeholder="请选择内容类别"
                  style="width: 180px;"
                >
                  <el-option
                    v-for="item in conCateList"
                    :key="item.catid"
                    :label="item.name"
                    :value="item.catid"
                  ></el-option>
                </el-select>
              </div>
              <div class="conditions-item">
                下发时间：
                <el-date-picker
                  v-model="pageParam.condition.giveTime"
                  type="daterange"
                  align="right"
                  unlink-panels
                  range-separator="至"
                  value-format="yyyy-MM-dd"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :picker-options="pickerOptions"
                ></el-date-picker>
              </div>
            </div>
            <div class="conditions-box two-box">
              <div class="conditions-item">
                工单内容：
                <el-input
                  v-model="pageParam.condition.content"
                  size="small"
                  :clearable="true"
                  placeholder="请输入内容关键字"
                  style="width: 765px;"
                ></el-input>
                <label class="condition-tips">*多个以 '、' 间隔</label>
              </div>
            </div>
            <div class="conditions-box two-box">
              <div class="condition-title">处理人员：</div>
              <div class="conditions-item" style="float:right">
                <el-radio-group v-model="pageParam.condition.empId" size="small">
                  <el-radio-button
                    :label="item.ryid"
                    v-for="(item, index) in empList"
                    :key="index"
                  >{{item.name}}</el-radio-button>
                </el-radio-group>
              </div>
            </div>
            <div class="conditions-box two-box">
              <div class="condition-title">工单状态：</div>
              <div class="conditions-item">
                <el-radio-group v-model="pageParam.condition.state" size="small">
                  <el-radio-button
                    :label="item.ztid"
                    v-for="(item, index) in stateList"
                    :key="index"
                  >{{item.name}}</el-radio-button>
                </el-radio-group>
              </div>
            </div>
            <div class="conditions-box two-box">
              <div class="condition-title">满意状态：</div>
              <div class="conditions-item">
                <el-radio-group v-model="pageParam.condition.unsatisfy" size="small">
                  <el-radio-button
                    :label="item.ztid"
                    v-for="(item, index) in satisfyList"
                    :key="index"
                  >{{item.name}}</el-radio-button>
                </el-radio-group>
              </div>
            </div>
            <div class="search-button">
              <el-button
                size="small"
                type="primary"
                icon="el-icon-search"
                plain
                @click="doSearch"
                :loading="loadingTable"
              >查询</el-button>
              <el-button
                size="small"
                type="info"
                icon="el-icon-refresh"
                plain
                @click="doReset"
                :loading="loadingTable"
              >重置</el-button>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </el-header>
    <!-- 主要区域容器 -->
    <el-main>
      <div class="opration-div">
        <el-button
          type="primary"
          plain
          icon="el-icon-document-copy"
          size="small"
          @click="doExport"
        >导出</el-button>
      </div>
      <el-table
        @row-dblclick="handledbClick"
        :data="tableItem.list"
        stripe
        border
        :height="tableHeight"
        v-loading="loadingTable"
      >
        <el-table-column prop="code" label="工单编号" align="left" show-overflow-tooltip></el-table-column>
        <el-table-column prop="sourceName" label="来源系统" align="center" width="220"></el-table-column>
        <el-table-column prop="cateName" label="工单类别" align="center" width="220"></el-table-column>
        <el-table-column prop="empName" label="处理人" align="center" width="220"></el-table-column>
        <el-table-column
          prop="majorCatName"
          label="内容类别"
          align="center"
          width="180"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="firstTime"
          label="下发时间"
          align="center"
          width="220"
          :formatter="formatDate"
        ></el-table-column>
        <el-table-column prop="unsatisfy" label="不满意" align="center" width="120">
          <template slot-scope="scope">
            <i
              v-if="scope.row.unsatisfy=== 1"
              class="el-icon-scissors"
              style="color: red; font-size: 16px;"
            ></i>
            <i v-else class="el-icon-scissors" style="color: #ddd; font-size: 16px;"></i>
          </template>
        </el-table-column>
        <el-table-column prop="dqzt" label="当前状态" align="center" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.dqzt=== 2" style="color: #F56C6C;" class="tabFontSize">待分发</span>
            <span v-else-if="scope.row.dqzt=== 3" style="color: #E6A23C;" class="tabFontSize">待办理</span>
            <span v-else-if="scope.row.dqzt=== 4" style="color: #409EFF;" class="tabFontSize">已办理</span>
            <span v-else-if="scope.row.dqzt=== 5" style="color: #909399;" class="tabFontSize">已退回</span>
            <span v-else-if="scope.row.dqzt=== 6" style="color: #67C23A;" class="tabFontSize">已结束</span>
            <span v-else-if="scope.row.dqzt=== 7" style="color: #409EFF;" class="tabFontSize">已办理审核</span>
            <span v-else-if="scope.row.dqzt=== 8" style="color: #909399;" class="tabFontSize">退回待审核</span>
          </template>
        </el-table-column>
        <el-table-column prop="isOverdue" label="超期" align="center" width="60">
          <template slot-scope="scope">
            <i
              v-if="scope.row.isOverdue=== 1"
              class="el-icon-date"
              style="color: red; font-size: 16px;"
            ></i>
            <i v-else class="el-icon-date" style="color: green; font-size: 16px;"></i>
          </template>
        </el-table-column>
        <el-table-column prop="operations" label="操作" align="center" width="100">
          <template slot-scope="scope">
            <el-button
              v-for="(item, index) in scope.row.operationsModelList"
              :key="index"
              :type="item.type"
              plain
              size="mini"
              :icon="item.icon"
              v-bind:class="'operations-'+item.handleMethod"
              @click="operationClick(item.handleMethod, scope.row)"
            >{{item.label}}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="tableItem.pageNum"
        :page-size="tableItem.pageSize"
        :page-sizes="[20, 30, 50, 100]"
        :total="tableItem.total"
        layout="total, sizes, prev, pager, next, jumper"
        style="float: right;"
      ></el-pagination>
    </el-main>

    <!-- 看详情 -->
    <el-dialog
      title="工单查看"
      :visible.sync="dialogDetail"
      width="100%"
      :fullscreen="fullScreen"
      :before-close="dialogCloseFn"
    >
      <synthetical-detail v-if="dialogDetail" ref="syntheticalDetail" v-bind:wllzid="wllzid"></synthetical-detail>
    </el-dialog>

    <!-- 导出文件下载 -->
    <el-dialog
      class="download-dialog"
      title="导出文件下载"
      :visible.sync="downloadDetail"
      width="80%"
      :before-close="dialogDownloadCloseFn"
    >
      <el-form :model="formItemData" label-width="200px">
        <el-row class="gdxx-file" style="margin-top: 20px;">
          <el-col :span="20" :offset="1">
            <el-form-item label="综合查询文件：">
              <!-- formItemData.fileEntity.filePath -->
              <a href="javascript:void(0)">{{formItemData.fileName}}</a>
              <span class="file-btn" @click="exportFilePreview">查看</span>
              <span class="file-btn" @click="exportFileDownload">下载</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </el-container>
</template>

<script>
import syntheticalDetail from './synthetical-detail.vue'
export default {
  data () {
    return {
      // 主键id
      wllzid: '',
      // 查询条件折叠面板
      activeNames: [],
      // 用户信息
      userInfo: JSON.parse(sessionStorage.getItem('GOVERNANCE_USER_INFO')),
      // 来源列表
      sourceList: [{ lyid: '', lymc: '全部' }],
      // 工单类别列表
      cateList: [{ catid: '', name: '全部', type: true }],
      // 工单内容类别list
      conCateList: [],
      // 处理人list
      empList: [],
      // 工单状态
      stateList: [
        { ztid: 0, name: '全部' },
        { ztid: 2, name: '办理中' },
        { ztid: 4, name: '已办理' },
        { ztid: 3, name: '已退回' }
      ],
      // 不满意件
      satisfyList: [
        { ztid: '', name: '全部' },
        { ztid: 0, name: '满意' },
        { ztid: 1, name: '不满意' }
      ],
      // 查询参数
      pageParam: {
        pageNum: 1,
        pageSize: 20,
        condition: {
          sourceId: '',
          cateId: '',
          conCateId: '',
          code: '',
          content: '',
          empId: '',
          giveTime: '',
          unsatisfy: '',
          state: 0
        }
      },
      // 加载
      loadingTable: false,
      // 表格高度
      tableHeight: -1,
      // 表格列表
      tableItem: {},
      // 工单查看
      dialogDetail: false,
      downloadDetail: false,
      fullScreen: true,
      // 导出生成文件
      formItemData: {
        fileName: '',
        filePath: '',
        filePreview: ''
      },
      pickerOptions: {
        shortcuts: [
          {
            text: '今年至今',
            onClick (picker) {
              const end = new Date()
              const start = new Date(new Date().getFullYear(), 0)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setMonth(start.getMonth() - 1)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setMonth(start.getMonth() - 3)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近六个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setMonth(start.getMonth() - 6)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      }
    }
  },
  methods: {
    // 获取来源列表
    getSourceList () {
      this.$axios.post(this.$api.source.selector).then(rs => {
        if (rs) {
          let sourcePojoList = rs
          this.sourceList = this.sourceList.concat(sourcePojoList)
        }
      })
    },
    // 获取工单类别列表
    getCateList () {
      this.$axios.post(this.$api.cate.work).then(rs => {
        if (rs) {
          let catePojoList = rs
          this.cateList = this.cateList.concat(catePojoList)
        }
      })
    },
    // 获取处室内容类别列表
    getConCateList () {
      this.$axios.post(this.$api.cate.content).then(rs => {
        if (rs) {
          this.conCateList = rs
        }
      })
    },
    // 办理人
    getEmpList () {
      this.$axios.post(this.$api.emp.selector).then(rs => {
        if (rs) {
          this.empList = rs
        }
      })
    },
    // 折叠面板操作
    handleCollapseChange (val) {},
    // 处室操作
    deptChange (data) {
      this.getConCateList(data)
    },
    // 查询方法
    doSearch () {
      this.activeNames = []
      this.loadingTable = true
      this.getSynthesizePage()
    },
    doReset () {
      this.pageParam = Object.assign(
        this.$data.pageParam,
        this.$options.data().pageParam
      )
      this.doSearch()
    },
    // 综合查询分页
    getSynthesizePage () {
      this.$axios.post(this.$api.query.synthetical, this.pageParam).then(rs => {
        if (rs) {
          this.tableItem = rs
          this.loadingTable = false
        }
      })
    },
    // 日期格式化
    formatDate: function (row, column) {
      const _this = this
      var date = row.giveTime
      if (date === undefined) {
        return ''
      }
      return _this.$moment(date).format('YYYY年MM月DD日 HH时mm分')
    },
    // 分页
    handleSizeChange: function (size) {
      this.pageParam.pageSize = size
      this.loadingTable = true
      this.getSynthesizePage()
    },
    // 分页
    handleCurrentChange: function (currentPage) {
      this.pageParam.pageNum = currentPage
      this.loadingTable = true
      this.getSynthesizePage()
    },
    // 操作点击事件
    operationClick (method, row) {
      switch (method) {
        case 'detail':
          this.detailFn(row)
          break
      }
    },
    handledbClick (row, event, column) {
      this.detailFn(row)
    },
    // 查看
    detailFn: function (item) {
      this.wllzid = item.wllzid
      this.dialogDetail = true
    },
    dialogCloseFn: function () {
      this.wllzid = ''
      this.dialogDetail = false
    },
    downloadFn () {
      this.downloadDetail = true
    },
    dialogDownloadCloseFn: function () {
      this.downloadDetail = false
    },
    // 导出
    doExport () {
      const _this = this
      _this
        .$confirm('导出文件耗时比较长，是否继续?', '提示', {
          cancelButtonText: '取消',
          confirmButtonText: '确定',
          type: 'warning'
        })
        .then(() => {
          _this.loadingTable = true
          _this.$axios
            .post(_this.$api.export.synthetical, _this.pageParam)
            .then(rs => {
              if (rs) {
                _this.loadingTable = false
                _this.formItemData = Object.assign(this.formItemData, rs)
                _this.downloadFn()
                // window.open(rs.filePath + '?attname=综合查询导出网络理政工单.xlsx')
              }
            })
        })
        .catch(() => {
          return false
        })
    },
    // 文件预览
    exportFilePreview () {
      let fileUrl = this.formItemData.filePath
      // fileUrl = fileUrl.replace('http://192.168.39.4:90', '')
      // window.open(this.formItemData.fileEntity.filePreview + encodeURIComponent(fileUrl))
      this.$previewFile(fileUrl)
    },
    // 文件下载
    exportFileDownload () {
      let fileUrl = this.formItemData.filePath
      // fileUrl = fileUrl.replace('http://192.168.39.4:90', 'http://222.210.127.164:90')
      // window.open(fileUrl)
      this.$downloadFile(fileUrl, '综合查询导出网络理政工单.xlsx')
    }
  },
  components: {
    syntheticalDetail
  },
  created: function () {
    this.getSourceList()
    this.getCateList()
    this.getConCateList()
    this.getEmpList()
    this.doSearch()
  }
}
</script>
